<template>
	<view class="help-page">
		<!-- 顶部导航 -->
		<view class="nav-header">
			<view class="nav-back" @click="goBack">
				<u-icon name="arrow-left" size="20" color="#333"></u-icon>
			</view>
			<text class="nav-title">帮助中心</text>
			<view class="nav-right"></view>
		</view>
		
		<!-- 搜索栏 -->
		<view class="search-section">
			<view class="search-box">
				<u-icon name="search" size="16" color="#999"></u-icon>
				<input 
					class="search-input" 
					v-model="searchKeyword" 
					placeholder="搜索帮助内容"
					@confirm="searchHelp"
				/>
			</view>
		</view>
		
		<scroll-view class="help-content" scroll-y>
			<!-- 热门问题 -->
			<view class="help-section">
				<view class="section-header">
					<text class="section-title">热门问题</text>
				</view>
				
				<view class="question-list">
					<view 
						class="question-item" 
						v-for="(item, index) in hotQuestions" 
						:key="index"
						@click="goQuestionDetail(item)"
					>
						<view class="question-icon">
							<u-icon name="help-circle" size="16" color="#27B387"></u-icon>
						</view>
						<text class="question-text">{{ item.title }}</text>
						<u-icon name="arrow-right" size="14" color="#ccc"></u-icon>
					</view>
				</view>
			</view>
			
			<!-- 帮助分类 -->
			<view class="help-section">
				<view class="section-header">
					<text class="section-title">帮助分类</text>
				</view>
				
				<view class="category-grid">
					<view 
						class="category-item" 
						v-for="(item, index) in helpCategories" 
						:key="index"
						@click="goCategoryDetail(item)"
					>
						<view class="category-icon" :style="{ backgroundColor: item.color }">
							<u-icon :name="item.icon" size="24" color="#fff"></u-icon>
						</view>
						<text class="category-name">{{ item.name }}</text>
						<text class="category-count">{{ item.count }}个问题</text>
					</view>
				</view>
			</view>
			
			<!-- 使用指南 -->
			<view class="help-section">
				<view class="section-header">
					<text class="section-title">使用指南</text>
				</view>
				
				<view class="guide-list">
					<view 
						class="guide-item" 
						v-for="(item, index) in guideList" 
						:key="index"
						@click="goGuideDetail(item)"
					>
						<image class="guide-image" :src="item.image" mode="aspectFill"></image>
						<view class="guide-info">
							<text class="guide-title">{{ item.title }}</text>
							<text class="guide-desc">{{ item.desc }}</text>
							<view class="guide-meta">
								<text class="meta-text">{{ item.readCount }}人阅读</text>
								<text class="meta-dot">·</text>
								<text class="meta-text">{{ item.updateTime }}</text>
							</view>
						</view>
						<u-icon name="arrow-right" size="14" color="#ccc"></u-icon>
					</view>
				</view>
			</view>
			
			<!-- 联系客服 -->
			<view class="contact-section">
				<view class="contact-card">
					<view class="contact-header">
						<view class="contact-icon">
							<u-icon name="chat" size="24" color="#27B387"></u-icon>
						</view>
						<view class="contact-info">
							<text class="contact-title">找不到答案？</text>
							<text class="contact-desc">联系在线客服为您解答</text>
						</view>
					</view>
					
					<view class="contact-actions">
						<button class="contact-btn" @click="contactService">
							<u-icon name="chat-fill" size="16" color="#fff"></u-icon>
							<text class="btn-text">在线客服</text>
						</button>
						
						<button class="contact-btn secondary" @click="callService">
							<u-icon name="phone" size="16" color="#27B387"></u-icon>
							<text class="btn-text">电话客服</text>
						</button>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			searchKeyword: '',
			
			// 热门问题
			hotQuestions: [
				{ id: 1, title: '如何申请退款？', category: 'order' },
				{ id: 2, title: '订单支付失败怎么办？', category: 'payment' },
				{ id: 3, title: '如何修改收货地址？', category: 'order' },
				{ id: 4, title: '商品什么时候发货？', category: 'logistics' },
				{ id: 5, title: '如何使用优惠券？', category: 'coupon' },
				{ id: 6, title: '积分如何获得和使用？', category: 'points' }
			],
			
			// 帮助分类
			helpCategories: [
				{ 
					id: 1, 
					name: '订单问题', 
					icon: 'list', 
					color: '#27B387', 
					count: 15 
				},
				{ 
					id: 2, 
					name: '支付问题', 
					icon: 'wallet', 
					color: '#ff9500', 
					count: 12 
				},
				{ 
					id: 3, 
					name: '物流配送', 
					icon: 'car', 
					color: '#5856d6', 
					count: 18 
				},
				{ 
					id: 4, 
					name: '售后服务', 
					icon: 'setting', 
					color: '#ff6b6b', 
					count: 10 
				},
				{ 
					id: 5, 
					name: '账户安全', 
					icon: 'lock', 
					color: '#1aad19', 
					count: 8 
				},
				{ 
					id: 6, 
					name: '优惠活动', 
					icon: 'gift', 
					color: '#ff4757', 
					count: 6 
				}
			],
			
			// 使用指南
			guideList: [
				{
					id: 1,
					title: '新手购物指南',
					desc: '详细介绍如何在平台上购买商品的完整流程',
					image: '/static/images/guide1.jpg',
					readCount: 1256,
					updateTime: '2天前'
				},
				{
					id: 2,
					title: '会员权益说明',
					desc: '了解不同会员等级享受的专属权益和优惠',
					image: '/static/images/guide2.jpg',
					readCount: 892,
					updateTime: '5天前'
				},
				{
					id: 3,
					title: '积分使用攻略',
					desc: '教你如何快速获得积分并合理使用积分抵扣',
					image: '/static/images/guide3.jpg',
					readCount: 654,
					updateTime: '1周前'
				}
			]
		}
	},
	onLoad() {
		// 页面加载时的初始化
	},
	methods: {
		// 返回上一页
		goBack() {
			uni.navigateBack()
		},
		
		// 搜索帮助
		searchHelp() {
			if (!this.searchKeyword.trim()) {
				uni.showToast({
					title: '请输入搜索关键词',
					icon: 'none'
				})
				return
			}
			
			uni.navigateTo({
				url: `/pages/help/search?keyword=${encodeURIComponent(this.searchKeyword)}`
			})
		},
		
		// 查看问题详情
		goQuestionDetail(item) {
			uni.navigateTo({
				url: `/pages/help/question-detail?id=${item.id}`
			})
		},
		
		// 查看分类详情
		goCategoryDetail(item) {
			uni.navigateTo({
				url: `/pages/help/category?id=${item.id}&name=${encodeURIComponent(item.name)}`
			})
		},
		
		// 查看指南详情
		goGuideDetail(item) {
			uni.navigateTo({
				url: `/pages/help/guide-detail?id=${item.id}`
			})
		},
		
		// 联系在线客服
		contactService() {
			// TODO: 打开客服聊天窗口
			uni.showToast({
				title: '正在连接客服...',
				icon: 'loading'
			})
			
			setTimeout(() => {
				uni.navigateTo({
					url: '/pages/service/chat'
				})
			}, 1000)
		},
		
		// 拨打客服电话
		callService() {
			uni.showModal({
				title: '客服电话',
				content: '400-123-4567\n\n服务时间：9:00-21:00',
				confirmText: '拨打',
				cancelText: '取消',
				success: res => {
					if (res.confirm) {
						uni.makePhoneCall({
							phoneNumber: '400-123-4567'
						})
					}
				}
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.help-page {
	background-color: #f5f5f5;
	height: 100vh;
	display: flex;
	flex-direction: column;
}

.nav-header {
	height: 44px;
	background-color: #fff;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 15px;
	border-bottom: 1px solid #f0f0f0;
	
	.nav-back {
		padding: 5px;
	}
	
	.nav-title {
		font-size: 16px;
		font-weight: 500;
		color: #333;
	}
	
	.nav-right {
		width: 30px;
	}
}

.search-section {
	padding: 15px;
	background-color: #fff;
	border-bottom: 1px solid #f0f0f0;
	
	.search-box {
		height: 36px;
		background-color: #f5f5f5;
		border-radius: 18px;
		padding: 0 15px;
		display: flex;
		align-items: center;
		gap: 8px;
		
		.search-input {
			flex: 1;
			font-size: 14px;
			color: #333;
			
			&::placeholder {
				color: #999;
			}
		}
	}
}

.help-content {
	flex: 1;
	padding: 10px 0;
	
	.help-section {
		margin-bottom: 15px;
		
		.section-header {
			padding: 0 15px 10px;
			
			.section-title {
				font-size: 16px;
				color: #333;
				font-weight: 500;
			}
		}
		
		.question-list {
			background-color: #fff;
			margin: 0 15px;
			border-radius: 8px;
			overflow: hidden;
			
			.question-item {
				padding: 15px;
				border-bottom: 1px solid #f0f0f0;
				display: flex;
				align-items: center;
				gap: 12px;
				
				&:last-child {
					border-bottom: none;
				}
				
				.question-icon {
					width: 24px;
					height: 24px;
					border-radius: 12px;
					background-color: #f0f9ff;
					display: flex;
					align-items: center;
					justify-content: center;
				}
				
				.question-text {
					flex: 1;
					font-size: 14px;
					color: #333;
				}
			}
		}
		
		.category-grid {
			padding: 0 15px;
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: 10px;
			
			.category-item {
				background-color: #fff;
				border-radius: 8px;
				padding: 20px 15px;
				display: flex;
				flex-direction: column;
				align-items: center;
				gap: 8px;
				
				.category-icon {
					width: 48px;
					height: 48px;
					border-radius: 24px;
					display: flex;
					align-items: center;
					justify-content: center;
				}
				
				.category-name {
					font-size: 14px;
					color: #333;
					font-weight: 500;
				}
				
				.category-count {
					font-size: 12px;
					color: #999;
				}
			}
		}
		
		.guide-list {
			background-color: #fff;
			margin: 0 15px;
			border-radius: 8px;
			overflow: hidden;
			
			.guide-item {
				padding: 15px;
				border-bottom: 1px solid #f0f0f0;
				display: flex;
				align-items: center;
				gap: 12px;
				
				&:last-child {
					border-bottom: none;
				}
				
				.guide-image {
					width: 60px;
					height: 60px;
					border-radius: 8px;
					background-color: #f5f5f5;
				}
				
				.guide-info {
					flex: 1;
					display: flex;
					flex-direction: column;
					gap: 4px;
					
					.guide-title {
						font-size: 14px;
						color: #333;
						font-weight: 500;
					}
					
					.guide-desc {
						font-size: 12px;
						color: #666;
						line-height: 1.4;
					}
					
					.guide-meta {
						display: flex;
						align-items: center;
						gap: 4px;
						
						.meta-text {
							font-size: 11px;
							color: #999;
						}
						
						.meta-dot {
							font-size: 11px;
							color: #ccc;
						}
					}
				}
			}
		}
	}
	
	.contact-section {
		padding: 0 15px;
		
		.contact-card {
			background: linear-gradient(135deg, #27B387 0%, #1e9b6f 100%);
			border-radius: 12px;
			padding: 20px;
			color: #fff;
			
			.contact-header {
				display: flex;
				align-items: center;
				gap: 12px;
				margin-bottom: 15px;
				
				.contact-icon {
					width: 40px;
					height: 40px;
					border-radius: 20px;
					background-color: rgba(255, 255, 255, 0.2);
					display: flex;
					align-items: center;
					justify-content: center;
				}
				
				.contact-info {
					display: flex;
					flex-direction: column;
					gap: 2px;
					
					.contact-title {
						font-size: 16px;
						font-weight: 500;
					}
					
					.contact-desc {
						font-size: 12px;
						opacity: 0.8;
					}
				}
			}
			
			.contact-actions {
				display: flex;
				gap: 10px;
				
				.contact-btn {
					flex: 1;
					height: 36px;
					border-radius: 18px;
					background-color: #fff;
					border: none;
					display: flex;
					align-items: center;
					justify-content: center;
					gap: 6px;
					
					&.secondary {
						background-color: transparent;
						border: 1px solid rgba(255, 255, 255, 0.3);
						
						.btn-text {
							color: #fff;
						}
					}
					
					.btn-text {
						font-size: 14px;
						color: #27B387;
						font-weight: 500;
					}
				}
			}
		}
	}
}
</style>